<template>
  <section class="calculator">
    <div class="left-content">
      <create-card title="区域" class="m-bottom10">
        <template #default>
          <el-radio-group v-model="default_region_id" class="m-bottom10">
            <el-radio-button v-for="item in region" :key="item.region_id" :label="item.region_id">{{ item.region_name }}</el-radio-button>
          </el-radio-group>
          <div class="zone-row" v-if="region[default_region_id]">
            <div v-for="item in region[default_region_id].city_list" :key="item.city_id" class="item" @click="FnChangeSite(item.city_id)"
              :class="[ default_city_id == item.city_id ? 'select-item' : '']">
              <div class="city-name">{{ item.city_name }}</div>
              <el-select v-model="default_site_id[item.city_id]" @change="FnChangeSite(item.city_id)">
                <el-option v-for="site in item.site_list" :key="site.site_id" :value="site.site_id" :label="site.site_name"></el-option>
              </el-select>
            </div>
          </div>
        </template>
      </create-card>
      <create-card title="HA配置" class="m-bottom10">
        <template #default>
          <el-radio-group v-model="default_ha_cpu_ram">
            <el-radio-button v-for="item in ha_config.cpu_ram_rule" :key="item.cpu" :label="item.cpu + ':' + item.ram">{{ item.name }}</el-radio-button>
          </el-radio-group>
        </template>
      </create-card>
      <create-card title="公网配置" class="m-bottom10">
        <template #default>
          <el-radio-group v-model="default_ros_cpu_ram">
            <el-radio-button label="2:4">2核4G</el-radio-button>
          </el-radio-group>
        </template>
      </create-card>
      <create-card title="Master配置" class="m-bottom10">
        <template #default>
          <vm-config :nodeConfig="master_node_config" @change-node-config="FnGetMasterConfig"></vm-config>
        </template>
      </create-card>
      <create-card title="Worker配置" class="m-bottom10">
        <template #default>
          <vm-config :nodeConfig="worker_node_config" @change-node-config="FnGetWorkerConfig"></vm-config>
        </template>
      </create-card>
    </div>
    <div class="right-config">
      <el-card class="m-bottom10">
        <template #header>
          <div class="card-header">
            <span>当前配置信息</span>
          </div>
        </template>
        <div class="box">
          <div>HA配置</div>
          <div class="row">
            <div class="label">实例规格</div>
            <div>{{ handleCpuRam(default_ha_cpu_ram) }}</div>
          </div>
          <div class="row">
            <div class="label"></div>
            <div class="price">￥{{ ha_price }}/天</div>
          </div>
        </div>
        <div class="box">
          <div>公网配置</div>
          <div class="row">
            <div class="label">实例规格</div>
            <div>{{ handleCpuRam(default_ros_cpu_ram) }}</div>
          </div>
          <div class="row">
            <div class="label"></div>
            <div class="price">￥{{ ros_price }}/天</div>
          </div>
        </div>
        <div class="box">
          <div>Master配置</div>
          <div class="row">
            <div class="label">实例规格</div>
            <div>{{ handleCpuRam(master_reqData.cpu_ram) }}</div>
          </div>
          <div class="row">
            <div class="label"></div>
            <div class="price" v-if="master_price.cpu">￥{{ (Number(master_price.cpu) +  Number(master_price.ram)).toFixed(2) }}/天</div>
          </div>
          <div class="row" v-if="master_reqData.system_disk">
            <div class="label">{{ master_reqData.system_disk.disk_type }}</div>
            <div>{{ master_reqData.system_disk.disk_size }}</div>
          </div>
          <div class="row">
            <div class="label"></div>
            <div class="price">￥{{ master_price.system_disk }}/天</div>
          </div>
          <div v-for="(item, index) in master_reqData.attach_disk" :key="index" class="row">
            <div class="label">{{ item.disk_type }}</div>
            <div>{{ item.disk_size }}GB</div>
          </div>
          <div class="row">
            <div class="label"></div>
            <div class="price" v-if="master_price.disk_price">￥{{ master_price.disk_price }}/天</div>
          </div>
        </div>
        <div class="box">
          <div>Worker配置</div>
          <div class="row">
            <div class="label">实例规格</div>
            <div>{{ handleCpuRam(worker_reqData.cpu_ram) }}</div>
          </div>
          <div class="row">
            <div class="label"></div>
            <div class="price" v-if="worker_price.cpu">￥{{ (Number(worker_price.cpu) +  Number(worker_price.ram)).toFixed(2) }}/天</div>
          </div>
          <div class="row" v-if="worker_reqData.system_disk">
            <div class="label">{{ worker_reqData.system_disk.disk_type }}</div>
            <div>{{ worker_reqData.system_disk.disk_size }}</div>
          </div>
          <div class="row">
            <div class="label"></div>
            <div class="price">￥{{ worker_price.system_disk }}/天</div>
          </div>
          <div v-for="(item, index) in worker_reqData.attach_disk" :key="index" class="row">
            <div class="label">{{ item.disk_type }}</div>
            <div>{{ item.disk_size }}GB</div>
          </div>
          <div class="row">
            <div class="label"></div>
            <div class="price" v-if="worker_price.disk_price">￥{{ worker_price.disk_price }}/天</div>
          </div>
        </div>
      </el-card>

      <el-card>
        <div class="row">
          <div class="label">总价</div>
          <div class="price">￥{{ total_price.toFixed(2) }}/天</div>
        </div>
      </el-card>
    </div>
  </section>
</template>

<script>
import createCard from '../components/createCard.vue'
import vmConfig from '../components/vmConfig.vue'
import Service from '../service/calculator'

export default {
  components: { createCard, vmConfig },
  data() {
    return {
      region: {},
      default_region_id: "",
      default_city_id: "",
      default_site_id: {},  // key为city_id, value为site_id
      ha_config: {},
      default_ha_cpu_ram: "",
      default_ros_cpu_ram: "2:4",
      master_node_config: [],
      worker_node_config: [],
      master_reqData: {},
      worker_reqData: {},
      ha_price: "",
      ros_price: "",
      master_price: {},
      worker_price: {},
    }
  },
  computed: {
    total_price() {
      return Number(this.master_price.total_price) * this.master_reqData.num + Number(this.worker_price.total_price) * this.worker_reqData.num + Number(this.ha_price) + Number(this.ros_price)
    }
  },
  methods: {
    FnGetRegion() {
      Service.get_open_sites().then(resData => {
        if(resData.code == "Success") {
          resData.data.all_sites_info.map(region=> {
            let new_site = {}
            region.city_list.map(city => {
              city.site_list.map(site => {
                if(resData.data.open_sites.indexOf(site.site_id) >= 0 ) {
                  let site_config = {
                    site_name: site.site_name,
                    site_id: site.site_id
                  }
                  if(new_site[city.city_id]) {
                    new_site[city.city_id].site_list.push(site_config)
                  } else {
                    new_site[city.city_id] = {
                      city_name: city.city_name,
                      city_id: city.city_id,
                      site_list: [site_config]
                    }
                  }
                }
              })
            })
            for(let key in new_site) {
              this.default_site_id[key] = new_site[key].site_list[0].site_id
            }
            this.region[region.region_id] = {
              city_list: new_site,
              region_name: region.region_name,
              region_id: region.region_id
            }
          })
          this.default_region_id = resData.data.all_sites_info[0].region_id
        }
      })
    },
    FnChangeSite(city_id) {
      this.default_city_id = city_id
      this.FnGetHAConfig()
      this.FnGetNodeConfig()
      this.FnGeRosPrice()
    },
    FnGetHAConfig() {
      let reqData = {
        site_id: this.default_site_id[this.default_city_id]
      }
      this.default_ha_cpu_ram = ""
      Service.get_ha_config(reqData).then(resData => {
        if(resData.code == "Success") {
          this.ha_config = resData.data
          let cpu_ram = this.ha_config.cpu_ram_rule[0]
          this.default_ha_cpu_ram = cpu_ram.cpu + ":" + cpu_ram.ram
        }
      })
    },
    FnGetNodeConfig() {
      let reqData = {
        site_id: this.default_site_id[this.default_city_id]
      }
      // Service.get_node_spec(reqData).then(resData => {
      //   if(resData.code == "Success") {
      //     console.log(resData.data)
      //   }
      // })
      Service.get_node_config(reqData).then(resData => {
        if(resData.code == "Success") {
          this.master_node_config = JSON.parse(JSON.stringify(resData.data.node_config[0].vm_config))
          this.worker_node_config = JSON.parse(JSON.stringify(resData.data.node_config[0].vm_config))
        }
      })
    },
    FnGetHAPrice() {
      let cpu_ram = this.default_ha_cpu_ram.split(":")
      let reqData = {
        site_id: this.default_site_id[this.default_city_id],
        gic_goods_id: this.ha_config.gic_goods_id,
        gic_goods_type: this.ha_config.gic_goods_type,
        cpu: cpu_ram[0],
        ram: cpu_ram[1],
        bill_goods_num: this.ha_config.bill_goods_num
      }
      Service.get_ha_price(reqData).then(resData => {
        if(resData.code == "Success") {
          this.ha_price = resData.data.price
        }
      })
    },
    FnGeRosPrice() {
      let reqData = {
        site_id: this.default_site_id[this.default_city_id]
      }
      Service.get_ros_price(reqData).then(resData => {
        if(resData.code == "Success") {
          this.ros_price = resData.data.price
        }
      })
    },
    FnGetMasterConfig(config, type) {
      this.master_reqData = config
      if(type == "cpu" || type == "disk") {
        this.FnGetNodePrice(this.master_reqData, "master")
      }
    },
    FnGetWorkerConfig(config, type) {
      this.worker_reqData = config
      if(type == "cpu" || type == "disk") {
        this.FnGetNodePrice(this.worker_reqData, "worker")
      }
    },
    FnGetNodePrice(config, type) {
      let reqData = {
        site_id: this.default_site_id[this.default_city_id],
        bill_scheme_id: config.bill_scheme_id,
        cpu: config.cpu_ram.split(":")[0],
        ram: config.cpu_ram.split(":")[1],
        attach_disk: config.attach_disk
      }
      if(!Number(reqData.cpu)) {
        return
      }
      Service.get_node_price(reqData).then(resData => {
        if(resData.code == "Success") {
          let disk_price = 0
          resData.data.attach_disk.map(item => {
            disk_price+= Number(item.price)
          })
          resData.data.disk_price = disk_price
          if(type == "master") {
            this.master_price = resData.data
          } else {
            this.worker_price = resData.data
          }
        }
      })
    },
    handleCpuRam(cpu_ram) {
      if(cpu_ram && Number(cpu_ram.split(":")[0])) {
        return cpu_ram.split(":")[0] + "核" + cpu_ram.split(":")[1] + "G"
      } else {
        return '--'
      }
    }
  },
  created() {
    this.FnGetRegion()
  },
  watch: {
    default_region_id(newVal) {
      if(newVal) {
        this.FnChangeSite(Object.keys(this.region[newVal].city_list)[0])
      }
    },
    default_ha_cpu_ram(newVal) {
      if(newVal) {
        this.FnGetHAPrice()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.calculator {
  display: flex;
  .left-content {
    flex: 1;
  }
  .right-config {
    width: 320px;
    padding-left: 20px;
    .box {
      border-bottom: 1px solid #DCDFE6;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
    .row {
      display: flex;
      justify-content: space-between;
      line-height: 28px;
      .price {
        color: #455cc6;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
}
.m-bottom10 {
  margin-bottom: 10px;
}
.zone-row {
  display: flex;
  .item {
    width: 120px;
    height: 56px;
    margin-right: 20px;
    text-align: center;
    .city-name {
      height: 28px;
      line-height: 26px;
      border: 1px solid #DCDFE6;
      border-bottom: none;
    }
  }
  .select-item {
    .city-name {
      background: #455cc6;
      border-color:#455cc6;
      color: #fff;
    }
  }
}
</style>
<style lang="scss">
.calculator .el-input__inner {
  text-align: center;
  border-radius: 0;
  &:hover {
    border-color: #455cc6;
  }
}
.calculator .select-item .el-input__inner {
  border-color: #455cc6;
}
</style>